<template>
<!--pages/index/secondPage.wxml-->
<view class="body">
  <view v-for="(item, idx) in allServer" :key="idx" class="ser-body">
    <view class="sec-title">
      <text class="ser-name">{{item.ser_name}}</text>
    </view>
    <view class="ser-desc" v-if="item.desc">
      <text>{{item.desc}}</text>
    </view>
    <view v-for="(item, index) in item.child" :key="index" class="ser-list" v-if="item.ser_local == '1'">
      <button class="ser-item" hover-class="btn" :data-index1="idx" :data-index2="index" @tap="secondPage2Next">
        <text>{{item.ser_name}}</text>
        <image src="/static/images/sys/right.png" class="list-img"></image>
      </button>
    </view>
    <view v-for="(item, index) in item.child" :key="index" class="ser-bottom" v-if="item.ser_local == '0'">
      <button class="ser-bottom-btn" :data-index1="idx" :data-index2="index" @tap="secondPage2Next">{{item.ser_name}}</button>
    </view>
  </view>
</view>
</template>

<script>
// pages/index/secondPage.js
const app = getApp();
const util = require("../../../../utils/util.js");
var optionsTitle = "";

export default {
  data() {
    return {
      name: "",
      allServer: []
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    optionsTitle = decodeURIComponent(options.title);
    let id = options.id;
    util.getUrl(app.globalData.url).then(res => this.init(id));
  },

  onShareAppMessage() {
    return {
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },

  // 分享朋友圈
  onShareTimeline: function () {
    return {
      title: "本地宝",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg",
      query: {
        title: "办事资格测试",
        id: 2351
      }
    };
  },
  methods: {
    init(id) {
      let $secondPageAllServer = {
        ac: "allServer",
        flag: "getServer",
        city: 'sz',
        type: app.globalData.platform,
        id
      };
      util.bstrequest('index.php', $secondPageAllServer, "POST").then(res => {
        let allServer = JSON.parse(JSON.stringify(res.data.allServer));
        if (res.data.name) uni.setNavigationBarTitle({
          title: res.data.name
        });else uni.setNavigationBarTitle({
          title: optionsTitle
        });
        this.setData({
          allServer
        });
      });
    },

    secondPage2Next(e) {
      let index1 = e.currentTarget.dataset.index1;
      let index2 = e.currentTarget.dataset.index2;
      let data = this.allServer[index1].child[index2];

      if (data.ser_link_method != '0') {
        util.navTest(data);
        util.clickNumber(data.id);
      }
    }

  }
};
</script>
<style>
/* pages/index/secondPage.wxss */
.body .ser-body:last-child {
    border: 0;
}
button {background-color: transparent}
button::after {border: 0}
.ser-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    color: #E4E4E4;
    padding: 0 40rpx 64rpx 40rpx;
    border-bottom: 16rpx solid #F3F3F3;
    margin-top: 40rpx;
}
.sec-title {
    width: 100%;
    font-size: 48rpx;
}
.ser-name {
    color: #232323;
    font-weight: 600;
}
.ser-desc {
    padding-top: 40rpx;
    font-size: 24rpx;
    border-radius: 16rpx;
    margin-top: 22rpx;
    width: 100%;
    box-sizing: border-box;
    color: #A7A7A7;
}
.ser-list {
    width: 100%;
    margin-top: 24rpx;
}
.ser-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ff6600;
    font-size: 30rpx;
    padding: 20rpx 0;
    padding-top: 0;
    border-bottom: 2rpx solid #F5F5F5;
}
.list-img {
    width: 11rpx;
    height: 19rpx;
}
.ser-bottom {
    width: 100%;
    margin-top: 30rpx;
}
.ser-bottom-btn {
    background: linear-gradient(to right, #FFAA00, #FF6600);
    color: #ffffff;
    border: 0;
    font-size: 28rpx;
}
</style>